<template>
  <block>
    <view v-if="visibleCtrl" :animation="animation" class="fm-modal__main fm-bodal__main--bottom">
      <slot></slot>
    </view>
  </block>
</template>

<script>
export default {
  name: 'FmModal',
  model: {
    prop: 'visible',
    event: 'toggle'
  },
  props: {
    visible: Boolean
  },
  data () {
    return {
      animation: {},
      visibleCtrl: false
    }
  },
  computed: {
    _visible: {
      get () {
        return this.correctVisible(this.visible)
      },
      set (val) {
        this.$emit('toggle', val)
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    correctVisible (val) {
      switch (val) {
        case true:
          this.handleOpen()
          break

        case false:
          this.handleClose()
          break
      }
      return val
    },
    handleOpen () {
      // 操作传值
      this._visible = true
      // 传个事件
      this.$emit('open')
      // 立即显示标签
      this.visibleCtrl = true
      // 延迟50毫秒传入动画
      setTimeout(() => {
        this.animation = this.$animation.side('0')
      }, 50)
    },
    handleClose () {
      // 操作传值
      this._visible = false
      // 传个事件
      this.$emit('close')
      // 立即传入动画
      this.animation = this.$animation.side('100%')
      // 延时200毫秒隐藏标签
      setTimeout(() => {
        this.visibleCtrl = false
      }, 200)
    }
  },
  created () {},
  mounted () {}
}
</script>

<style lang="less">
@import "../asset/style/_variable.less";
.fm-modal {
  // position: fixed;
  // top: 0;
  // right: 0;
  // bottom: 0;
  // left: 0;
  z-index: @zindex-modal;
}

.fm-modal__main {
  box-shadow: @--box-shadow-dark;
  z-index: @zindex-modal;
  background-color: @--fill-base;
  height: 400px;
}

.fm-bodal__main--bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>
